<template>
<div class="nav">
    <div class="nav-left">
        <div class="logo">
            <img src="../assets/img/logo1.png" alt="">
        </div>
        <div class="title"><div>重庆工商大学志愿服务网</div>
            <div class="title-mini">CTBU Volunteer Service</div>
        </div>
    </div>
    <div class="nav-right">
        <span v-if="userInfo==null" :style="['color:red']" @click="showLoginAndRegister(0)">请登录</span>

        <div class="userInfo" v-if="userInfo!=null">
          <span>欢迎回来,</span>
          <el-dropdown trigger="click">
            <span class="nickName">
              {{ userInfo.name }}
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <router-link class="a-link" to="/setting/myInfo"
                    >系统后台</router-link
                  >
                </el-dropdown-item>
                <el-dropdown-item
                  ><a href="javascript:void(0)" class="a-link" @click="logout"
                    >退出登录</a
                  ></el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div class="avatar"><img :src="`/api/file/getAvatar/${userInfo.userId}`"/></div>
        </div>
        <el-divider direction="vertical" />
        <span v-if="userInfo==null" @click="showLoginAndRegister(1)">志愿者注册</span>
    </div>
</div>

 <!-- <div class="block text-center">
    <el-carousel  class="carousel-l" height="300px"  motion-blur>
      <el-carousel-item v-for="(item,index) in carouselList" :key="index">
        <img  alt="志愿者图片" :src="item">
    </el-carousel-item>
    </el-carousel>

    <el-carousel   class="carousel-s"  height="200px"  motion-blur>
      <el-carousel-item v-for="(item,index) in carouselList" :key="index">
        <img  alt="志愿者图片" :src="item">
    </el-carousel-item>
    </el-carousel>
  </div> -->

  <div class="content">

    <router-view></router-view>
  </div>
</template>

<script setup>
 import { ref, reactive, getCurrentInstance, nextTick } from "vue"
 const { proxy } = getCurrentInstance();
 import { useRouter, useRoute } from "vue-router";

const userInfo=ref(proxy.VueCookies.get("userInfo")==null?null:proxy.VueCookies.get("userInfo"));

const router = useRouter();
const route = useRoute();

const showLoginAndRegister=(opType)=>{
    // 展示注册登录页面
    router.push(`/login?opType=${opType}`)
}

const api = {
  getUserInfo: "/getUserInfo",
  logout: "/account/logout",
};

//退出登录
const logout = () => {
  proxy.Confirm(`你确定要退出吗?`, async () => {
    let result = await proxy.Request({
      url: api.logout,
    });
    if (!result) {
      return;
    }
    proxy.Message.success("退出成功");
    proxy.VueCookies.remove("userInfo");
    router.go(0);
  });
};

// which one ?
const carouselList= [
    "/src/assets/img/c1.jpg",
    "/src/assets/img/c2.jpg",
    "/src/assets/img/c3.jpg",
]

</script>

<style lang="scss" scoped>

/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

/* 导航栏样式 */
.nav {
  height: 200px;
  background-color: #fff;
  background: url("../assets/img/search-panel-bg.png");
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .nav-left {
    display: flex;
    align-items: center;

    .logo img {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }

    .title {
      font-size: 26px;
      font-weight: bold;
      color: #1d2088;

      .title-mini {
        font-size: 18px;
        color: #666;
        margin-top: 5px;
      }
    }
  }

  .nav-right {
    display: flex;
    align-items: center;

    span {
      margin-left: 20px;
      cursor: pointer;
      transition: color 0.3s ease;

      &:hover {
        color: #007bff;
      }
    }

    .userInfo {
      display: flex;
      align-items: center;

      .nickName {
        font-size: 18px;
        color: #007bff;
        cursor: pointer;
        margin-right: 10px;
      }

      .avatar img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
      }
    }
  }
}

/* 轮播图样式 */
.carousel-l {
  display: block;
  margin-top: 20px;
}

.carousel-s {
  display: none;
}

.el-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.el-carousel__item:hover img {
  opacity: 1;
}

/* 内容区样式 */
.content {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  margin: 20px auto;
  max-width: 1200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media screen and (max-width: 600px) {
  .nav {
    height: 60px;
    padding: 0 15px;

    .logo img {
      width: 40px;
      height: 40px;
    }

    .title {
      font-size: 18px;
      line-height: 60px;

      .title-mini {
        display: none;
      }
    }

    .nav-right span {
      font-size: 14px;
    }

    .userInfo {
      .nickName {
        font-size: 16px;
      }

      .avatar img {
        width: 30px;
        height: 30px;
      }
    }
  }

  .carousel-l {
    display: none;
  }

  .carousel-s {
    display: block;
    height: 200px;
  }

  .el-carousel__item img {
    height: 200px;
  }

  .content {
    padding: 15px;
    margin: 15px auto;
  }
}

//      .userInfo {
//       display: flex;
//       align-items: center;
//       .nickName {
//         font-size: 20px;
//         color: royalblue;
//         cursor: pointer;
//       }
//       .avatar {
//         width: 40px;
//         margin-left: 10px;
//         align-items: center;
//         display: flex;
//         img {
//           border-radius: 50%;
//           width: 40px;
//         }
//       }
//     }
//     .carousel-l{display: block;}
//     .carousel-s{display: none;}
//     .nav{
//        height: 80px;
//        background-color:rgb(255, 255, 255);
//        display: flex;
//        justify-content: space-between;
//         .nav-left{
//             margin-left: 20px;
//             height: 80px;
//             display: flex;
//             .logo{
//                 height: 80px;
//                 align-content: center;
//                 img{
//                     width: 50px;
//                     height: 50px;
//                 }
//             }
//             .title{
//                 margin-top: 18px;
//                 margin-left: 10px;
//                 font-size: 26px;
//                 font-weight: bolder;
//                 color: rgb(29, 32, 136);
//                 .title-mini{
//                     font-size: 18px;

//                 }
//             }
//         }
//         .nav-right{
//             margin-right: 20px;
//             line-height: 80px;
//             color: rgb(29, 32, 136);
//             font-weight: 400;
//             cursor: pointer;
//             font-size: 18px;
//         }
//     }
//         .demonstration {
//             color: var(--el-text-color-secondary);
//         }
//         .el-carousel__container{
//             height: 400px;
//         }
//     .el-carousel__item img{
//         opacity: 0.75;
//         display: block;
//         width: 100%;
//         height: 260px;
//         object-fit: cover;
//     }


// .el-carousel__item:nth-child(2n) {
//   background-color: #99a9bf;
// }

// .el-carousel__item:nth-child(2n + 1) {
//   background-color: #d3dce6;
// }

// .content{
//     height: calc(100vh - 80px - 300px);
//     background-color: rgb(255, 255, 255);
//     width: 86%;
//     margin-left: 7%;
//     border-radius: 10px;

// }

// @media screen and (max-width: 600px) {
//     .carousel-l{display: none;}
//     .carousel-s{display: block;}
//     .nav{
//        height: 40px;
//        background-color:rgb(153, 169, 191);
//        display: flex;
//        justify-content: space-between;
//         .nav-left{
//             margin-left: 20px;
//             height: 40px;
//             display: flex;
//             .logo{
//                 height: 40px;
//                 align-content: center;
//                 img{
//                     width: 40px;
//                     height: 40px;
//                 }
//             }
//             .title{
//                 margin-top: 0px;
//                 margin-left: 10px;
//                 font-size: 16px;
//                 line-height: 40px;
//                 font-weight: bolder;
//                 color: rgb(29, 32, 136);
//                 .title-mini{
//                     font-size: 18px;
//                     display: none;
//                 }
//             }
//         }
//         .nav-right{
//             margin-right: 20px;
//             line-height: 40px;
//             color: rgb(29, 32, 136);
//             font-weight: 400;
//             cursor: pointer;
//             font-size: 16px;
//         }
//     }
//     .demonstration {
//         color: var(--el-text-color-secondary);
//     }
//     .el-carousel__container{
//         height: 200px;
//         display: block;
//     }
//         .el-carousel__item{
//             height: 200px;
//         }
//     .el-carousel__item img{
//         opacity: 0.75;
//         display: block;
//         width: 100%;
//         height: 160px;
//         object-fit: cover;
//     }


// .el-carousel__item:nth-child(2n) {
//   background-color: #99a9bf;
// }

// .el-carousel__item:nth-child(2n + 1) {
//   background-color: #d3dce6;
// }

// .content{
//     height: calc(100vh - 80px - 300px);
//     background-color: rgb(255, 255, 255);
//     width: 86%;
//     margin-left: 7%;
//     border-radius: 10px;

// }
// }

</style>
